import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'

import Button from '@mui/material/Button'
import Box from '@mui/material/Box'

<% if (codeRouter) { %>
import type { RootRoute } from '@tanstack/react-router'
<% } else { %>
export const Route = createFileRoute('/demo/mui')({
  component: MUIDemo,
})
<% } %>

function MUIDemo() {
  return (
    <Box sx={{ px: 2, py: 4 }}>
      <Button variant="contained">Hello world</Button>
    </Box>
  )
}

<% if (codeRouter) { %>
export default (parentRoute: RootRoute) => createRoute({
  path: '/demo/mui',
  
  component: MUIDemo,

  getParentRoute: () => parentRoute,
})
<% } %>
